<template>
  <div>
    <div class="public-common">
        <div class="public-title" style="text-indent: 20px;">员工考勤列表</div>
        <div class="inline-btn">
          <label>员工姓名：</label>
          <el-input v-model="searchdata.txtUserName" v-on:keyup.13="searchBtn"></el-input>
          <el-button type="primary" @click="searchBtn">搜索</el-button>
          <el-button type="primary" @click="addBtn">新建</el-button>
          <el-button type="primary" @click="editBtn">编辑</el-button>
          <el-button type="warning" @click="deleteBtn">删除</el-button>
          <el-button type="primary" @click="addBtn1">导入数据</el-button>
        </div>
        <div class="" style="margin:2%;">
          <el-table :data="tableData" border width="100%" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="50" label=" " fixed="left"></el-table-column>
            <el-table-column type="selection"  width="55"></el-table-column>
            <el-table-column prop="UserName"  label="员工姓名" sortable></el-table-column>
            <el-table-column prop="OrgName"  label="所属部门" sortable></el-table-column>
            <el-table-column prop="TheDate"  label="考勤日期" sortable></el-table-column>
            <el-table-column prop="AmOn"  label="上班时间" sortable></el-table-column>
            <el-table-column prop="PmOff"  label="下班时间" sortable></el-table-column>
          </el-table>
          <el-pagination style="margin-top: 20px;"
            @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage"
            :page-sizes="pagerange"  class="mt"  :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"  :total="totalnum"  ></el-pagination>
        </div>
    </div>
    <!--el-dialog-->
    <el-dialog title="导入考勤" :visible.sync="dialogVisible" width="40%;">
      <div >
        <label>考勤数据文件:</label>
        <input type="file" style="width:220px;" ref="inputer" accept="application/msexcel">
      </div>
      <div class="border1">
        <!-- <div>导入说明</div> -->
        <div>1. 导入的考勤文件必须是固定格式的Excel文件；</div>
        <div style="margin:10px 0;">
          2. <el-button type="text" @click.native="downloadFile()">点击下载</el-button>考勤文件模版文件
          <!-- <a href="" download="考勤文件模版.xls" @click="downloadFile">点击下载</a>考勤文件模版文件 -->
          </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="importBtn">导 入</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--el-dialog-->
    <el-dialog title="员工考勤情况" :visible.sync="dialogVisible1">
      <span>
        <el-form ref="formData" :model="formData" width="50%" style="margin-left:2%;" :rules="formRule" label-width="120px">
          <el-form-item label="员工姓名：" prop="UserName">
            <el-select :disabled="isDisable" v-model="formData.UserName" placeholder="请选择设备领用人">
              <el-option v-for="(t,i) in usedList" :label="t.name" :key="i" :value="t.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考勤日期：" prop="txtTheDate">
            <el-date-picker :disabled="isDisable" type="date" v-model="formData.txtTheDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="上班时间：" prop="txtAmOn">
            <el-date-picker  type="time" v-model="formData.txtAmOn" format="HH:mm" value-format="HH:mm"></el-date-picker>
          </el-form-item>
          <el-form-item label="下班时间：" prop="txtAmOff">
            <el-date-picker  type="time" v-model="formData.txtAmOff" format="HH:mm" value-format="HH:mm"></el-date-picker>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitData('formData',1)">应用</el-button>
        <el-button type="primary" @click="submitData('formData',2)">确 定</el-button>
        <el-button @click="cancelBtn('formData')">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {atten} from '@/ajax';
import config from './Manage.js';
import common from '@/utils/common.js';
export default {
    data(){
        return {
          searchdata:{
            txtUserName:''
          },
          totalnum: 0,
          currentPage: 0,
          pagerange: [2, 10, 20, 50, 100],
          pagesize: 10,
          tableData:[],
          dialogVisible:false,
          selection:[],
          config:config,
          formData:{UserName:'',txtTheDate:'',txtAmOn:'08:00:00',txtAmOff:'18:00:00'},
          formRule:{
            UserName:{required:true,message:'请选择员工姓名',trigger:'blur'},
            txtTheDate:{required:true,message:'请选择上班日期',trigger:'blur'},
            txtAmOn:{required:true,message:'请选择上班时间',trigger:'blur'},
            txtAmOff:{required:true,message:'请选择下班时间',trigger:'blur'}
          },
          dialogVisible1:false,
          common:common,
          usedList:[{'id':'123','name':'lily'}],
          isDisable:false,
          userMsg:[]
        }
    },
    mounted(){
      this.getAttendanceList();
    },
    inject:['reload'],
    methods:{
      //
      searchBtn(){
        console.log('11')
        this.getAttendanceList();
      },
      //
      handleSelectionChange(val){
        if(val){
          this.selection = [];
          for (let i in val) {
            this.selection.push(val[i]['UserID'])
            this.userMsg.push(val[i])
          }
        }
      },
      downloadFile(){
        atten.loadAttendance().then((res)=>{
          if(res.data.code === '00000'){
            window.location.href = res.data.data;
            //common.exportExcel(res.data.data,'考勤文件模版文件',"application/vnd.ms-excel","")
          }
        }).catch(()=>{
          this.$message('文件不存在，请联系管理员')
        })
      },
      //
      getAttendanceList(){
        this.searchdata['page'] = this.pagesize;
        this.searchdata['rows'] = this.currentPage;
        this.tableData = config.attenList;
        this.totalnum = this.tableData.length;
        /* atten.getAttendanceList(this.searchdata).then((res) => {
          if (res.data.code == '00000') {
            if(res.data.data.length > 0){
              this.tableData = res.data.data;
              this.totalnum = this.tableData.length;
            }else{
              this.tableData = [];
              this.totalnum = 0;
            }
          } else {
            this.$message(res.data.message);
          }
          }).catch(()=>{
            this.$message('服务器正忙，获取公司动态列表失败');
          }) */
      },
      //分页
      handleSizeChange(val){
          this.pagesize = val;
          this.getAttendanceList();
      },
      handleCurrentChange(val){
          this.currentPage = val;
          this.getAttendanceList();
      },
      addBtn(){
        this.isDisable = false
        this.formData.txtTheDate = common.getFormatterTime()
        this.dialogVisible1 = true
      },
      editBtn(){
         if(this.selection.length == 1){
           this.isDisable = true
           this.dialogVisible1 = true
           this.formData.UserName = this.userMsg[0]['UserName']
           this.formData.txtAmOff = this.userMsg[0]['PmOff']
           this.formData.txtAmOn = this.userMsg[0]['AmOn']
        }else{
          this.$message('请选择一条要操作的数据')
        }
      },
      addBtn1(){
        this.dialogVisible = true
      },
      deleteBtn(){
        if(this.selection.length <= 0){
          this.$message('请选择要操作的数据')
        }else{
          this.$confirm('您确定要删除所选择的记录吗？删除的数据将无法恢复？', '操作提示', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(() => {
             atten.deleteAttendance(this.selection).then((res) => {
                if (res.data.code == '00000') {
                  this.reload()
                } else {
                  this.$message(res.data.message);
                }
              }).catch(()=>{
                this.$message('服务器正忙，删除失败');
              })
          }).catch();
        }
      },
      //
      importBtn(){
        let formData = new FormData();
        let inputDOM = this.$refs.inputer;
        let imgMsg = inputDOM.files[0];
        formData.append('file', imgMsg);
        atten.importAttendance(formData).then((res) => {
           if (res.data.code == '00000') {
             this.reload()
           } else {
             this.$message(res.data.message);
           }
         }).catch(()=>{
           this.$message('服务器正忙，导入失败');
         })
      },
      //
      submitData(form,type){
        this.$refs[form].validate((valid) => {
          if(valid){
            atten.addAttendance(this.formData).then((res) => {
                if (res.data.code == '00000') {
                  if(type == 1){
                    this.$refs[form].resetFields();
                  }else{
                    this.reload()
                  }
                } else {
                  this.$message(res.data.message);
                }
              }).catch(()=>{
                this.$message('服务器正忙，添加失败');
            })
          }else{
            return false
          }
        })
      },
      cancelBtn(form){
        this.$refs[form].clearValidate();
        this.$refs[form].resetFields();
        this.dialogVisible1=false;
      }
    },
    watch:{

    }
}
</script>
<style lang="scss">
.public-common{
    .public-title{line-height: 30px;background-color: #deecfd;}
    .inline-btn{display: inline-flex;margin: 20px;
      label{width:100px;line-height: 32px;margin-left:10px;text-align: right;}
      .el-input{width: 170px;}
      .el-button{margin-left:10px;}
    }
    .el-form-item .el-input{width: 180px;}
    .left{display: inline-block;;width:60%;float: left;}
    .right{display: inline-block;;width:38%;float: left;}
    .el-form .inline-btn{margin:unset;}
    .footer{
      width: 100%;
      display: inline-flex;
      margin-left: 72%;
    }
    .right-border{
      border-left: 1px solid #eeeeee;
      min-height: 500px;
      margin-left: 1%;
      height: auto;
    }
}
.border1{
      border: 1px solid #eee;
      text-indent: 10px;
      margin-top: 20px;
      height: 50px;
      padding-top: 10px;
    }
</style>
